<template>
  <div class="home card">
    <div class="left">
      <el-card>
        <div class="toponebox">
          <UploadImg
            v-model:image-url="getxginfo.avatar"
            :file-size="3"
            :borderRadius="borderRadius"
            :infodata="infodata"
            @update:imageUrl="updateimageUrl"
          >
            <template #tip>上传头像</template>
          </UploadImg>

          <div class="bjbox">
            <el-button type="primary" class="button" @click="enitbutton">编辑信息</el-button>
          </div>

          <div class="inforbox">
            <div class="inforboxtext">
              患者姓名：<span class="contextname">{{ getxginfo.name }}</span>
            </div>
            <div class="inforboxtext">
              性别：<span class="contextname">{{ getxginfo.sex }}</span>
            </div>
            <div class="inforboxtext">
              手机:<span class="contextname"> {{ getxginfo.phoneNumber }}</span>
            </div>
            <div class="inforboxtext">身份证号:</div>
            <div>
              <span class="contextname">{{ getxginfo.idCard }}</span>
            </div>
            <div class="inforboxtext">
              主诊医生：<span class="contextname">{{ getxginfo.doctorName }}</span>
            </div>
            <div class="inforboxtext">
              医保类型:
              <div>
                <span class="contextname"> {{ getxginfo.insuranceName }}</span>
              </div>
            </div>

            <div class="inforboxtext">
              项目分组：
              <div>
                <span class="contextname">{{ xmfzname }}</span>
              </div>
            </div>
            <div class="inforboxtext">
              糖尿病分型：
              <div>
                <span class="contextname">{{ getxginfo.diabetesName }}</span>
              </div>
            </div>
            <div class="inforboxtext">
              加入管理时间：
              <div>
                <span class="contextname"> {{ getxginfo.create_time }}</span>
              </div>
            </div>

            <div class="inforboxtext">
              预计下一次复诊时间:
              <div>
                <span class="contextname"> {{ getxginfo.nextVisitTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="right">
      <div class="contentbox">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="1">
            <div class="jbxxbox">
              <Baseinfo v-if="checkname == '1'" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="检查信息" name="2">
            <Jzinfo v-if="checkname == '2'" />
          </el-tab-pane>
          <el-tab-pane label="检验记录" name="3">
            <Hyxx v-if="checkname == '3'" />
          </el-tab-pane>
          <el-tab-pane label="处方信息" name="4">
            <Cfxx v-if="checkname == '4'" />
          </el-tab-pane>
          <el-tab-pane label="定期随访" name="5">
            <Dqsf v-if="checkname == '5'" />
          </el-tab-pane>
          <el-tab-pane label="复诊预约" name="6">
            <Fzyy v-if="checkname == '6'" />
          </el-tab-pane>
          <el-tab-pane label="添加问卷" name="7">
            <Ajwj v-if="checkname == '7'" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <Addzj ref="addzjComponent" @Addconten="Addconten" :xginfo="xginfo" @addConten="addConten" />
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import Baseinfo from "@/views/pageAdd/baseinfo.vue";
import Hyxx from "@/views/pageAdd/hyxx.vue";
import Jzinfo from "@/views/pageAdd/jzinfo.vue";
import Cfxx from "@/views/pageAdd/cfxx.vue";
import Addzj from "@/views/home/add.vue";
import Dqsf from "@/views/pageAdd/dqsf.vue";
import Fzyy from "@/views/pageAdd/fzyy.vue";
import Ajwj from "@/views/pageAdd/addwj.vue";
import UploadImg from "@/components/Upload/Img.vue";
import { useRoute } from "vue-router";
import { getYPlist } from "@/api/modules/login";
import { getInfoxg, joinxghz } from "@/api/hzmange/index.js";
const route = useRoute();
const routedata = reactive(route.query);

let infoID = ref("");
let xginfo = ref({});
let getxginfo = ref({});
const activeName = ref("1");
const ImageProps = ref();
const borderRadius = ref("50%");
let showaddinfro = ref(false);
let checkname = ref("1");

const handleClick = tab => {
  checkname.value = tab.paneName;
  if (tab.props.name == "3") {
    //判断本地存储oypzj是否存在，不存在则请求接口获取数据
    if (!JSON.parse(sessionStorage.getItem("YPlist"))) {
      console.log("11111111111111111111", sessionStorage.getItem("YPlist"));
      getYPlist().then(res => {
        sessionStorage.setItem("YPlist", JSON.stringify(res.data));
      });
    } else {
      console.log("22222222222222222222222222222", sessionStorage.getItem("YPlist"));
    }
  }
};
const imageUrl = "";
let infodata = ref({});
infodata.value = {
  id: routedata.id
};
function handleAvatarSuccess(res, file) {
  this.imageUrl = URL.createObjectURL(file.raw);
}

function beforeAvatarUpload(file) {
  const isJPG = file.type === "image/jpeg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    this.$message.error("上传头像图片只能是 JPG 格式!");
  }
  if (!isLt2M) {
    this.$message.error("上传头像图片大小不能超过 2MB!");
  }
  return isJPG && isLt2M;
}
const addzjComponent = ref(null);
let xmfzname = ref("");

getlef();
function getlef() {
  setTimeout(() => {
    getInfoxg({ id: routedata.id }).then(res => {
      if (res.code == 200) {
        getxginfo.value = res.data;
        sessionStorage.setItem("patientInfo", JSON.stringify(res.data));
        xmfzname.value = res.data.projectNames.toString();
        xginfo.value = {
          name: res.data.name,
          idCard: res.data.idCard,
          phoneNumber: res.data.phoneNumber,
          insuranceType: res.data.insuranceType,
          chiefId: res.data.chiefId,
          patientTeamIds: res.data.patientTeamIds
        };
      }
    });
  }, 1000);
}
const enitbutton = () => {
  addzjComponent.value.open();
  nextTick(() => {
    addzjComponent.value.getAction();
  });
};

const Addconten = val => {};
const closehxbox = () => {
  showaddinfro.value = false;
};
function updateimageUrl(e) {}
function addConten(e) {
  Object.assign(getxginfo.value, e);
  console.log(getxginfo.value.name);
  joinxghz(getxginfo.value);
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  .left {
    width: 200px;

    margin-right: 10px;
    .toponebox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .bjbox {
        margin-top: 20px;
      }

      .imgbox {
        width: 100px;
        height: 100px;
        /* height: 9%; */
        border-radius: 50%;
      }
      .inforbox {
        margin-top: 30px;
        font-size: 14px;
        overflow: auto;
        height: 420px;
        .inforboxtext {
          margin: 12px 0;
          color: #606266;
          font-weight: 600;
        }
      }
      .topinfo {
        flex: 1;
        color: #9a9b9d;
        font-size: 15px;
        margin-left: 1%;
        .row-with-margin {
          margin-bottom: 20px;
          /* 设置行间距 */
        }
      }
    }
  }

  .right {
    flex: 1;
    overflow: auto;
    .contentbox {
      height: 100%;
      .jbxxbox {
        overflow: auto;
        height: 900px;
      }
    }
  }
}
.contextname {
  color: #2d4f4c;
  font-weight: 400;
}
// ::v-deep(.el-card__body) {
//   background: #f7b36b;
// }
</style>
